<template>
  <!-- 
   template 功能：
    1. 代表当前组件的模板页面
    2. 当template作为一个元素使用，充当类似于div的作用，但是最终不会渲染任何内容

  渲染动态组件
    1. component是vue提供的内置组件，本身啥也不渲染
    2. 渲染看is属性的值，is的值是啥，就渲染啥
  -->
  <!-- <template v-for="config in editorStore.componentList" :key="config.id">
    <Wrapper :id="config.id">
      <component :is="config.package" :config="config" />
    </Wrapper>
  </template> -->

  <!-- 
    v-model="editorStore.componentList" 拖拽的数据
    item-key="id" 遍历元素key属性的取值
  -->
  <Draggable v-model="editorStore.componentList" item-key="id">
    <!-- 
      具名插槽：item。 就是Draggable内部遍历渲染的内容
      作用域插槽：{ element } -> element 就是遍历出来数据（config）
    -->
    <template #item="{ element }">
      <Wrapper :id="element.id">
        <component :is="element.package" :config="element" />
      </Wrapper>
    </template>
  </Draggable>
</template>

<script lang="ts" setup>
import Draggable from "vuedraggable"; // pnpm add vuedraggable@next
import Wrapper from "../wrapper/index.vue";
import useEditorStore from "@/store/modules/editor";

defineOptions({
  name: "Canvas",
});

const editorStore = useEditorStore();
</script>

<style scoped lang="scss"></style>
